<template>
  <div id="app">

    <el-backtop :bottom="100">
      <div style="{
        height: 100%;
        width: 100%;
        background-color: #f2f5f6;
        box-shadow: 0 0 6px rgba(0,0,0, .12);
        text-align: center;
        line-height: 40px;
        color: #1989fa;}">UP
      </div>
    </el-backtop>

    <div style="position: fixed;bottom: 0;right: 0">
      <el-button type="primary" style="width:150px;"><i class="el-icon-s-comment" style="float:left;"></i> 快捷咨询
      </el-button>
    </div>

    <div style="width:100%;position: fixed;z-index: 1000;">
      <b-navbar class="user_navbar_main" toggleable="lg" type="dark" variant="info">

       <div class="user_section">
         <div class="user_wrap">
           <b-navbar-brand href="#">IT帮</b-navbar-brand>
         </div>

         <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>

         <b-collapse id="nav-collapse" is-nav>
           <div>
             <b-navbar-nav>
               <b-nav-item @click="$router.push('/userLogin')">首页</b-nav-item>
               <b-nav-item @click="$router.push('/userLoginMain/programmer')">程序员</b-nav-item>
               <b-nav-item class="postTask_item" @click="$router.push('/userLoginMain/postTask')">任务</b-nav-item>
             </b-navbar-nav>
           </div>

           <div>
             <b-nav-form style="margin: 0 auto">
               <el-input style="width: 280px;"
                         placeholder="请输入内容" v-model="selectInput" class="input-with-select">
                 <el-button slot="append" icon="el-icon-search"></el-button>
               </el-input>
             </b-nav-form>
           </div>

           <!-- Right aligned nav items -->
           <b-navbar-nav class="ml-auto" v-if="this.$store.state.userStatus">

            <div class="user_navbar_wrap">
              <b-navbar-brand href="#" class="user_navbar_box user_navbar_item">
                <b-button variant="info" v-b-modal.modal-1>登录</b-button>
              </b-navbar-brand>

              <b-navbar-brand class="user_navbar_box" href="#">
                <span>/</span>
              </b-navbar-brand>

              <b-navbar-brand class="user_navbar_box" href="#">
                <b-button variant="info" v-b-modal.modal-2>注册</b-button>
              </b-navbar-brand>
            </div>
           </b-navbar-nav>


           <b-navbar-nav class="" v-else>
             <div class="user_work_main">
               <b-nav-item-dropdown text="工作台" right style="padding-right: 10px">
                 <b-list-group>
                   <b-dropdown-item @click="goMyWork()">
                     <i class="el-icon-refresh-left"/> 待审核
                   </b-dropdown-item>
                   <b-dropdown-item @click="goMyWork()">
                     <i class="el-icon-suitcase"/> 我的任务
                   </b-dropdown-item>
                   <b-dropdown-item @click="goMyWork()">
                     <i class="el-icon-s-custom"/> 我的雇佣
                   </b-dropdown-item>
                 </b-list-group>
               </b-nav-item-dropdown>
             </div>

             <div>
               <b-nav-item-dropdown text="消息" right style="padding-right: 30px">
                 <b-list-group>
                   <b-dropdown-item href="#">系统消息
                     <el-badge :value="12" type="success"/>
                   </b-dropdown-item>
                   <b-dropdown-item href="#">工作通知
                     <el-badge :value="5"/>
                   </b-dropdown-item>
                   <b-dropdown-item href="#">交易消息
                     <el-badge :value="2"/>
                   </b-dropdown-item>
                   <b-dropdown-item href="#"> 评论回复
                     <el-badge :value="8" type="primary"/>
                   </b-dropdown-item>
                   <b-dropdown-item href="#">赞及其他
                     <el-badge :value="0" type="warning"/>
                   </b-dropdown-item>
                 </b-list-group>
               </b-nav-item-dropdown>
             </div>

             <el-avatar :size="50" :src="this.$store.state.userImg" style="float: left"></el-avatar>

             <div>
               <b-nav-item-dropdown :text="this.$store.state.userName" righ style="padding-left: 20px">
                 <b-list-group>
                   <b-dropdown-item @click="$router.push('/userLoginMain/personCenter/pCInfo')">
                     <i class="el-icon-user-solid"/> 个人中心
                   </b-dropdown-item>
                   <b-dropdown-item><i class="el-icon-star-on"/> 我的收藏</b-dropdown-item>
                   <b-dropdown-item @click="credit()"><i class="el-icon-trophy"/> 技术信用</b-dropdown-item>
                   <b-dropdown-item @click="logout()">
                     <i class="el-icon-switch-button"/> 退出
                   </b-dropdown-item>
                 </b-list-group>
               </b-nav-item-dropdown>
             </div>

           </b-navbar-nav>

         </b-collapse>
       </div>
      </b-navbar>
    </div>

    <div style="height: 100px"></div>

    <div>
      <router-view></router-view>
    </div>

    <div style="clear:both;height: 200px"></div>

    <div style="clear: both;">
      <bottom></bottom>
    </div>

    <div>
      <!--<b-button v-b-modal.modal-1>Launch demo modal</b-button>-->
      <b-modal id="modal-1" title="登录" centered @ok="login()">
        <span style="float: right;font-size: x-small;color: blue;cursor:pointer"
              @click="switchLogin()">{{ switchLoginMethod }}</span>
        <b-form-group
            id="input-group-1"
            label="账号:"
            label-for="input-1"
            description="我们不会泄露您的任何信息.">
          <b-form-input v-if="loginStatus"
                        id="input-1" v-model="loginForm.userAccount" type="email" required
                        placeholder="UserName"></b-form-input>
          <b-input-group prepend="中国 +86" class="mb-2 mr-sm-2 mb-sm-0" v-else>
            <b-input id="inline-form-input-username" v-model="loginForm.userAccount" placeholder="Phone"></b-input>
          </b-input-group>
        </b-form-group>
        <b-form-group id="input-group-2" label="密码:" label-for="input-2">
          <b-form-input
              id="input-2"
              v-model="loginForm.userPassword"
              type="password"
              required
              placeholder="PassWord"></b-form-input>
        </b-form-group>
        <b-form-group id="input-group-3" label="其他登录方式:">
          <b-nav>
            <b-nav-item>
              <img src="../../assets/img/微信.jpg" style="width: 50px;height: 40px">
            </b-nav-item>
            <b-nav-item>
              <img src="../../assets/img/微博.jpg" style="width: 50px;height: 40px">
            </b-nav-item>
            <b-nav-item>
              <img src="../../assets/img/GitHub.jpg" style="width: 50px;height: 40px">
            </b-nav-item>
          </b-nav>
        </b-form-group>
      </b-modal>
    </div>

    <div>
      <b-modal id="modal-2" centered title="注册">
        <span style="float: right;font-size: x-small;color: blue;cursor:pointer"
              @click="switchRegistered()">{{ switchRegisteredMethod }}</span>
        <b-form-group
            id="input-group-2-1"
            label="账号:"
            label-for="input-1">
          <b-form-input v-if="registeredStatus"
                        id="input-1" v-model="registeredForm.user" type="email" required
                        placeholder="Email"></b-form-input>

          <b-input-group prepend="中国 +86" class="mb-2 mr-sm-2 mb-sm-0" v-else>
            <b-input id="inline-form-input-username" v-model="registeredForm.user" placeholder="Phone"></b-input>
          </b-input-group>
        </b-form-group>
        <b-form-group id="input-group-2-2" label="验证码:" label-for="input-2">
          <b-input-group>
            <b-form-input
                id="input-2"
                v-model="registeredForm.verificationCode"
                type="text"
                required
                placeholder="VerificationCode">
            </b-form-input>

            <b-input-group-append>
              <b-button variant="info" v-if="verificationStatus" @click="verificationStatus=false">获取验证码</b-button>
              <img src="../../assets/img/VerificationCode.png" style="width: 150px;height: 38px;" v-else>
            </b-input-group-append>

          </b-input-group>
        </b-form-group>
        <b-form-group id="input-group-2-3" label="昵称:" label-for="input-3">
          <b-form-input
              id="input-3"
              v-model="registeredForm.nickName"
              type="text"
              required
              placeholder="NickName"></b-form-input>
        </b-form-group>


        <b-form-group id="input-group-2-4" label="密码:" label-for="input-4">
          <b-form-input
              id="input-4"
              v-model="registeredForm.pass"
              type="password"
              required
              placeholder="PassWord"></b-form-input>
        </b-form-group>

        <b-form-group id="input-group-2-5" label="其他注册方式:">
          <b-nav>
            <b-nav-item>
              <img src="../../assets/img/微信.jpg" style="width: 50px;height: 40px">
            </b-nav-item>
            <b-nav-item>
              <img src="../../assets/img/微博.jpg" style="width: 50px;height: 40px">
            </b-nav-item>
            <b-nav-item>
              <img src="../../assets/img/GitHub.jpg" style="width: 50px;height: 40px">
            </b-nav-item>
          </b-nav>
        </b-form-group>

      </b-modal>
    </div>

  </div>
</template>

<script>
import bottom from "@/components/other/bottom";
import Vue from "vue";

export default {
  name: "userLoginMain",
  data() {
    return {
      circleUrl: "https://masteryan.oss-cn-beijing.aliyuncs.com/timg.jpg",

      selectInput: '',

      loginStatus: true,
      switchLoginMethod: '手机号登录',
      //登录表单
      loginForm: {
        userAccount: "wy2668461654@163.com",
        userPassword: "123"
      },

      registeredStatus: true,
      switchRegisteredMethod: '手机号注册',
      verificationStatus: true,
      //注册表单
      registeredForm: {
        user: '',
        verificationCode: '',
        nickName: '',
        pass: ''
      },
    }
  },
  methods: {

    goMyWork() {
      this.$router.push('/userLoginMain/personCenter/pCMyWork')
    },

    credit() {
      this.$router.push({
        path: '/technologyCredit',
        query: {userId: this.$store.state.userId}
      })
    },

    //切换登录方式
    switchLogin() {
      if (this.loginStatus) {
        this.loginStatus = false
        this.switchLoginMethod = "邮箱登录"
      } else {
        this.loginStatus = true
        this.switchLoginMethod = "手机号登录"
      }
    },
    async login() {
      const {data: res} = await this.$http.post('/sys/userLogin', this.loginForm)
      if (res.code === 200) {
        Vue.prototype.$notify.success({
          title: "成功",
          message: '登录成功，欢迎来到IT帮'
        })
        this.$store.state.userId = res.content.user.userId
        this.$store.state.userName = res.content.user.nickName
        this.$store.state.userImg = res.content.userImage.imageUrl
        this.$store.state.userStatus = false
      } else {
        Vue.prototype.$notify.error({
          title: "错误",
          message: '登录失败'
        })
      }
    },
    switchRegistered() {
      if (this.registeredStatus) {
        this.registeredStatus = false
        this.switchRegisteredMethod = "邮箱注册"
      } else {
        this.registeredStatus = true
        this.switchRegisteredMethod = "手机号注册"
      }
    },
    logout() {
      this.$store.state.userId = ''
      this.$store.state.userName = ''
      this.$store.state.userStatus = true
      window.sessionStorage.removeItem('token')
      Vue.prototype.$notify.success({
        title: "成功",
        message: '您已成功退出'
      })
      this.$router.push('/userLogin')
    },
  },
  watch: {
  },
  components: {
    bottom
  }
}
</script>

<style scoped>
.user_section{
  display: flex;
  align-items: center
}
.user_navbar_main{
  justify-content: center;
}
.user_navbar_box{
  margin-right: 0;
}
.user_navbar_wrap{
  display: flex;
  align-items: center;
}
.user_navbar_box.user_navbar_item{
  margin-left: 8px;
}
.postTask_item{
  margin-right: 8px;
}
.user_work_main{
  margin-left: 8px;
}
</style>